<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>单表查询</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<link href="js/plugins/dateTimePicker/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery.min.js"></script> 
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<!-- 新增js  -->
	<script src="Highcharts/js/highcharts.js"></script>
	<script src="Highcharts/js/highcharts-3d.js"></script>
	<script src="Highcharts/js/modules/exporting.js"></script>	
	<script type="text/javascript" src="js/plugins/dateTimePicker/jquery.datetimepicker.js"></script>	
	<script type="text/javascript" src="js/tools.js"></script>
  </head>
  <body style="overflow: hidden;">
	<!-- Right side -->
	<div id="fcontent">
	    <div class="clear" style="margin-top:10px; "></div>
	    <!-- Main content wrapper -->
	    <div class="wrapper" >
	    
	        <ul class="tabs" >
                <li><a href="#tab1" onclick="chartSearch('1');" style="border-left: 1px solid #cdcdcd;border-top:1px solid #cdcdcd; ">延时分布</a></li>
                <li><a href="#tab2" onclick="chartSearch('2');" style="border-top:1px solid #cdcdcd; ">延时统计</a></li>
                <li><a href="#tab3" onclick="chartSearch('3');" style="border-top:1px solid #cdcdcd; ">延时占比</a></li>
            </ul>
	        <div class="tab_container" >
                <div id="tab1" class="tab_content">显示某表在某一段时间范围内的延时情况</div>
                <div id="tab2" class="tab_content">统计某表在不同的延时区间内采集次数分布情况</div>
                <div id="tab3" class="tab_content">显示某表在不同延时区间内采集次数所占比例</div>
            </div>	
        <div class="widget" style="margin-top: 0px;">
        	<form id="searchForm">
            <table cellpadding="0" cellspacing="0" width="100%" class="sTable">
                <tbody>
                	<tr>
                	    <td>地区</td>
                        <td>
                        	 <select name="" style="width:90%;height:30px;" ><option></option><option>地区1</option><option>地区2</option></select>
                        </td>
                	    <td>区县</td>
                        <td>
                        	 <select name="" style="width:90%;height:30px;" ><option></option><option>县区1</option><option>县区2</option></select>
                        </td>                        
                	    <td>台区</td>
                        <td>
                        	 <select name="" style="width:90%;height:30px;" ><option></option></select>
                        </td>                        
                        <td>终端地址</td>
                        <td><input type="text" value="" name="TERMINAL_ADDRESS" style="width:90%;height:30px;" /></td> 
                        <td rowspan="2" style="width:10%;vertical-align: top;">
                 		<a href="javascript:chartSearch('');" title="" class="button basic" style="margin: 5px;"><img src="images/icons/dark/magnify.png" alt="" class="icon" /><span style="font-size:12px;">查询</span></a>
                        </td>                       
                	</tr>
                    <tr>
                        <td>起始日期</td>
                        <td><input id="BEGINDATE" name="BEGINDATE" type="text" style="width:90%;height:30px;" /> 
                        </td>
                        <td>截止日期</td>
                        <td><input id="ENDDATE" name="ENDDATE" type="text" style="width:90%;height:30px;" /> 
                        </td>
                        <td>延时大于</td>
                        <td><input type="text" value="" name="" style="width:90%;height:30px;" /></td> 
                         <td>延时小于</td>
                        <td><input type="text" value="" name="s" style="width:90%;height:30px;" /></td> 

                    </tr>
                    <!--  
                    <tr>
                        <td>通道类型</td>
                        <td><input type="text" value="" name="RMT_CH_TYPE" style="width:90%;height:30px;" /></td>
                        <td>终端类型</td>
                        <td><input type="text" value="" name="TERMINAL_TYPE" style="width:90%;height:30px;" /></td>
                        <td>地区类型</td>
                        <td><input type="text" value="" name="ZONE" style="width:90%;height:30px;" /></td>
                    </tr>
                    -->
                    
                </tbody>
            </table>
            </form>
        </div>  	    
	        <!-- Lines chart -->
	        <!--  
	        <div class="clear" style="margin-top:10px; "></div>
        	<ul class="tabs" >
                <li><a href="#tab1" onclick="chartSearch('1');" style="border-left: 1px solid #cdcdcd;border-top:1px solid #cdcdcd; ">延时概况</a></li>
                <li><a href="#tab2" onclick="chartSearch('2');" style="border-top:1px solid #cdcdcd; ">延时分布</a></li>
                <li><a href="#tab3" onclick="chartSearch('3');" style="border-top:1px solid #cdcdcd; ">延时统计</a></li>
            </ul>
	        <div class="tab_container" >
                <div id="tab1" class="tab_content">显示某一段时间内设备的延时情况</div>
                <div id="tab2" class="tab_content">网络延迟的分布图</div>
                <div id="tab3" class="tab_content">网络延迟统计图</div>
            </div>	
            -->
	        <div class="widget chartWrapper" style="margin-top:0px; ">
	            <div class="title"><img src="images/icons/color/chart.png" alt="" class="titleIcon" /><h6>数据图</h6></div>
	            <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
	        </div>
	        	        <!-- Note -->
<!-- 	        <div id="dev" class="nNote nInformation hideit"> -->
<!-- 	            <p><strong>当前无设备信息。</strong></p> -->
<!-- 	        </div> -->
	  
	            <div class="clear"></div>
	            <input id="chartType" value="1" type="hidden" />
	     </div>
	</div>
	<script type="text/javascript">
	//页面初始化 tab页
	$(document).ready(function(){
		$("div[class^='widget']").contentTabs();
  		$(this).find(".tab_content").hide(); //Hide all content
		$(this).find("ul.tabs li:first").addClass("activeTab").show(); //Activate first tab
		$(this).find(".tab_content:first").show(); //Show first tab contents
	});
		
	//时间控件
	$('#BEGINDATE').datetimepicker({
	    lang:'ch',
	    timepicker:false,
	     format:'Y-m-d',
	    formatDate:'Y-m-d'
	});
	$('#ENDDATE').datetimepicker({
	    lang:'ch',
	    timepicker:false,
	     format:'Y-m-d',
	    formatDate:'Y-m-d'
	});
	
	function chartSearch (chartType) {
		if(chartType==''){
			chartType = $("#chartType").val();
		}else{
			$("#chartType").val(chartType);
		}
		var begindate = $("#BEGINDATE").val();	
		var enddate = $("#ENDDATE").val();
		if(begindate ==''){
			alert('请选择起始日期！');
			return;
		}
		var param = $("#searchForm").serializeObject(); 
		if(chartType ==1){
		    $('#container').highcharts({
				 credits:{
                   	enabled:false
                 },
                 exporting:{
                  enabled:false
                },
		        title: {
		            text: '',
		            x: -20 //center
		        },
		        subtitle: {
		            text: '单表延时分布图',
		            x: -20
		        },
		        xAxis: {
		            categories: ['05-01', '05-02', '05-03', '05-04', '05-05', '05-06', '05-07', '05-08', '05-09', '05-10']
		        },
		        yAxis: {
		            title: {
		                text: '延时（单位秒）'
		            },
		            plotLines: [{
		                value: 0,
		                width: 1,
		                color: '#808080'
		            }]
		        },
		        tooltip: {
		            valueSuffix: 's'
		        },
		        legend: {
		            layout: 'vertical',
		            align: 'right',
		            verticalAlign: 'middle',
		            borderWidth: 0
		        },
		        series: [{
		            name: 'A表',
		            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
		        }]
		    });
		}
		/**************************************/
		if(chartType ==2){
		    $('#container').highcharts({
				 credits:{
                   	enabled:false
                 },
                 exporting:{
                  enabled:false
                },
		        chart: {
		            type: 'column'
		        },
		        title: {
		            text: '某表延时采集次数统计图'
		        },
		        subtitle: {
		            text: ''
		        },
		        xAxis: {
		            categories:  ['0-5', '6-10', '11-30', '31-60', '60+'],
		            stitle: {
		                text: '延时区间（单位秒）'
		            }
		        },
		        yAxis: {
		            min: 0,
		            title: {
		                text: '采集次数（单位次）'
		            }
		        },
		        tooltip: { //{series.name}:
		            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		            pointFormat: '<tr><td style="color:{series.color};padding:0"> </td>' +
		                '<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
		            footerFormat: '</table>',
		            shared: true,
		            useHTML: true
		        },
		        plotOptions: {
		            column: {
		                pointPadding: 0.2,
		                borderWidth: 0
		            }
		        },
		        series: [{
		            name: 'A表',
		            data: [49, 71, 106, 95, 54]
		
		        }]
		    });	
		}
		/*********************************/
		if(chartType ==3) {

			Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
			    return {
			        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
			        stops: [
			            [0, color],
			            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
			        ]
			    };
			});
		    $('#container').highcharts({
		        chart: {
		            plotBackgroundColor: null,
		            plotBorderWidth: null,
		            plotShadow: false
		        },
		        credits:{
                   	enabled:false
                 },
                 exporting:{
                  enabled:false
                },
		        title: {
		            text: '某表采集次数所属延时区间百分比'
		        },
		        tooltip: {
		    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		        },
		        plotOptions: {
		            pie: {
		                allowPointSelect: true,
		                cursor: 'pointer',
		                dataLabels: {
		                    enabled: true,
		                    color: '#000000',
		                    connectorColor: '#000000',
		                    formatter: function() {
		                        return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(1) +' %';
		                    }
		                }
		            }
		        },
		        series: [{
		            type: 'pie',
		            name: 'Browser share',
		            data: [
		                ['0-5',   45],
		                ['6-10',       26],
		                ['11-30',    28],
		                ['30-60',     16],
		                ['60+',   4]
		            ]
		        }]
		    });
 
		}			

	}
	
	//重置父页面div高度
	function resetPheight(){
		$(window.parent.document).find("#frameShow").height($("#fcontent").height()+20);
	    $(window.parent.document).find("#rightSide").height($("#fcontent").height()+80);
	    $(window.parent.document).find("#leftSide").height($("#fcontent").height()+20);
	}
	
	</script>
  </body>
</html>
